import React from 'react';
import PropTypes from 'prop-types';

// 函数组件接收 props 作为参数
function PropsDemo(props) {
  // 可以使用解构赋值简化代码
  const { name, skills, isActive } = props;
  
  return (
    <div className="props-demo">
      <h3>你好，{name}！</h3>
      <p>状态: {isActive ? '活跃' : '非活跃'}</p>
      <p>技能:</p>
      <ul>
        {skills.map((skill, index) => (
          <li key={index}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}

// 使用 PropTypes 进行类型检查
PropsDemo.propTypes = {
  name: PropTypes.string.isRequired,
  skills: PropTypes.array,
  isActive: PropTypes.bool
};

// 设置默认 props
PropsDemo.defaultProps = {
  name: '访客',
  skills: [],
  isActive: false
};

export default PropsDemo; 